<template>
  <div class="container teacher-list">
    <div class="heander">
      <edu-category @patch="handleCategory" :list="categoryList"></edu-category>
    </div>
    <template v-if="$util.isDef(teacherList)">
      <edu-teacher-list
        v-if="teacherList.length > 0"
        :teacherList="teacherList"
        @next="handleItemClick"
      ></edu-teacher-list>
      <edu-no-data v-else></edu-no-data>
    </template>
    <edu-pagination @handleCurrentChange="handleCurrentChange"></edu-pagination>
  </div>
</template>

<script>
import EduTeacherList from '@/components/EduTeacherList'
import EduNoData from '@/components/EduNoData'
import EduPagination from '@/components/EduPagination'
import EduCategory from '@/components/EduCategory'
export default {
  components: {
    EduTeacherList,
    EduNoData,
    EduPagination,
    EduCategory
  },
  data() {
    return {
      teacherList: null,
      categoryList: []
    }
  },
  mounted() {
    this.handleInitList()
    this.getCategoryInfo()
  },
  watch: {
    $route(n, o) {
      if (n != o) {
        this.$store.dispatch('paginate/setPaginate', {
          currentPage: 1
        })
        this.handleInitList()
        this.getCategoryInfo()
      }
    }
  },
  methods: {
    // 分页
    handleCurrentChange() {
      this.handleInitList()
    },
    // 初始化列表
    handleInitList() {
      this.$api.getTeacherList(
        {
          page: this.$store.getters['paginate/page'],
          count: 32,
          category: this.$route.query.category
        },
        res => {
          let data = res.data
          this.teacherList = data.data
          this.$store.dispatch('paginate/setPaginate', {
            listRows: 32,
            total: data.total
          })
        }
      )
    },
    // 分类
    handleCategory(val) {
      this.$router.push({
        query: {
          category: val
        }
      })
    },
    // 获取分类数据
    getCategoryInfo() {
      this.$api.getCategory(
        {
          type: 1
        },
        res => {
          const data = res.data
          this.categoryList = data
        }
      )
    },
    handleItemClick(id) {
      this.$router.push({
        path: '/user',
        query: {
          id
        }
      })
    }
  },
  destroyed() {
    this.$store.commit('paginate/SET_PAGINATE_DEFAULT')
  }
}
</script>

<style lang="scss" scoped>
.teacher-list {
  margin-top: 10px;
  ::v-deep .teacher-list {
    margin-top: 15px;
  }
  .heander {
    padding: 24px 24px 0;
    background-color: #ffffff;
  }
}
</style>
